<template>
  <el-dialog v-model="dialogVisible"
             title=""
             width="40%"
             :show-close="false">
    <div style="text-align: center">
      <span style="font-size: 23px;font-weight: 400">选择服务专员与合作伙伴</span>
    </div>
    <div class="mt20" style="text-align: center;width: 100%;padding-left: 15%;padding-right: 15%">
      <span>服务专员：</span>
      <ld-select v-model="state.specialist"
                 url="/api/user/manage/query/specialist"
                 label="realName"
                 value="userId"
                 placeholder="请选择服务专员"/>
    </div>
    <div class="mt20" style="text-align: center;width: 100%;padding-left: 15%;padding-right: 15%">
      <span>合作伙伴：</span>
      <ld-select v-model="state.partner"
                 url="/api/user/manage/query/partner"
                 label="realName"
                 value="userId"
                 placeholder="请选择合作伙伴"/>
    </div>
    <template #footer>
      <span class="dialog-footer" style="padding-left: 15%;padding-right: 15%">
        <el-button type="primary" @click="page.submitSpecialist()">提交</el-button>
        <el-button @click="page.openOrCloseDialog()">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref, reactive, getCurrentInstance, onBeforeMount} from 'vue';
import {ElMessage, ElMessageBox, FormInstance} from 'element-plus';
import {approveMark} from "/@/views/enterpriseManager/dictionary/constant";

const state = reactive({
  specialist: "",
  partner: "",
});
// 控制弹窗显示隐藏
const dialogVisible = ref(false);

// 定义一个触发提交事件的函数，父组件可以监听该事件
const emit = defineEmits(['submit', 'close']);

const page = {
  init: () => {
    //初始化经纪人信息
  },
  openOrCloseDialog: () => {
    dialogVisible.value = !dialogVisible.value;
  },
  submitSpecialist: () => {
    // 提交
    if (!state.specialist && !state.partner) {
      // 显示消息确认框
      ElMessageBox.confirm(
          '您未选择任何服务专员或合作伙伴，确认要提交吗？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        // 用户点击确定，执行提交操作
        emit('submit', {approveMark: approveMark.APPROVED});
      }).catch(() => {
        // 用户点击取消，不执行操作
        ElMessage.info('已取消提交');
      });
    } else {
      let userId = "";
      if (state.specialist) {
        userId = state.specialist;
        if (state.partner) {
          userId += ',' + state.partner;
        }
      } else {
        userId = state.partner;
      }
      emit('submit', {approveMark: approveMark.APPROVED, queryObj: {userId: userId}});
    }
    page.openOrCloseDialog();
  }
}

onBeforeMount(() => {
  page.init();
});


// 暴露打开弹窗的方法给父组件使用
defineExpose({
  openDialog: () => {
    // 打开弹窗时清空用户id
    state.userId = '';
    page.openOrCloseDialog();
  }
});
</script>

<style scoped>
/* 可以添加自定义样式 */
/* 让 dialog 标题居中 */
:deep(.el-dialog__header) {
  margin: auto;
}

/* 让按钮容器居左 */
.dialog-footer {
  display: flex;
  justify-content: flex-start;
}
</style>